<div class="flex items-center">
    <x-jet-danger-button wire:click="confirmReport" wire:loading.attr="disabled" class="disabled:opacity-25">
        {{ __('Report') }}
    </x-jet-danger-button>
    <x-jet-dialog-modal wire:model="confirmingReport">
        <x-slot name="title">
            {{ __('Report') }}
        </x-slot>

        <x-slot name="content">


            <div class="mt-4" x-data="{}" x-on:confirming-report.window="setTimeout(() => $refs.content.focus(), 250)">
                <textarea class="mt-1 block w-full form-input rounded-md shadow-sm" placeholder="{{ __('Reason for reporting') }}"
                             x-ref="content"
                          wire:model.defer="content"></textarea>

                <x-jet-input-error for="content" class="mt-2" />
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-jet-button wire:click="$toggle('confirmingReport')" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jet-button>
            <x-jet-danger-button class="ml-2" wire:click="report" wire:loading.attr="disabled">
                {{ __('Report') }}
            </x-jet-danger-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>

